'use strict';

import React, {Component, PropTypes} from 'react';
import {Input, Button} from 'amazeui-react';
import {Http} from '../lib';
import styles from '../../css/index.css';

export default class SearchInput extends Component {
	/*
	 * 构造函数。
	 * @param props 只读属性
	 */
	constructor(props) {
		super(props);
		this.state = {
			datas: []
		};
	}

	/*
	 * 查询。
	 */
	query() {
		const url = this.props.url;
		const value = this.refs.input.getValue();
		
		if (!value) {
			this.setState({
				datas: []
			});
		} else {
			let param = {
				realname: value,
			};

			Http.post(url, param, data => {
				if (data.data.length !== 0) {
					this.setState({
						datas: data.data
					});
				}
			});
		}
	}
	
	/*
	 * 按回车时。
	 * @param e 事件
	 */
	onKeyDown(e) {
		if (e.keyCode === 13) {
			this.refs.input.getFieldDOMNode().blur();
			this.query();
		}
	}

	/*
	 * 渲染视图。
	 */
	render() {
		const datas = this.state.datas;

		const list = datas.map((x, i) => {
			return (
				<li 
					key={i}
					className={styles.listItem}
					onClick={e => {
						this.props.onSelect(x);
						this.refs.input.getFieldDOMNode().value = '';
						this.setState({
							datas: [],
						});
					}}
				>{x.realname + ' | ' + x.unitName}</li>
			);
		});

		const button = (
			<Button
				amStyle='primary'
				onClick={this.query.bind(this)}
			>搜索</Button>
		);

		return (
			<div style={{
				display: 'inline-block',
				width: this.props.width,
				position: 'relative'
			}}>
				<Input 
					validation={this.state.validation}
					hasFeedback
					type='text'
					placeholder={this.props.placeholder}
					radius={this.props.radius}
					round={this.props.round}
					readOnly={this.props.readOnly}
					label={this.props.label}
					defaultValue={this.props.defaultValue}
					disabled={this.props.disabled}
					icon={this.props.icon}
					amSize={this.props.amSize}
					standalone={this.props.standalone}
					addonBefore={this.props.addonBefore}
					addonAfter={this.props.addonAfter}
					btnBefore={this.props.btnBefore}
					amStyle={this.props.amStyle}
					ref='input'
					style={this.props.style}
					className={this.props.className}
					onKeyDown={this.onKeyDown.bind(this)}
					btnAfter={button}
				/>
				<ul 
					className={styles.list}
					style={{
						width: '100%',
						maxHeight: 250,
						margin: 0,
						padding: 0,
						position: 'absolute',
						top: 36,
						left: 0,
						backgroundColor: '#ffffff',
						border: '1px solid #cccccc',
						display: datas.length !== 0 ? 'inline' : 'none',
						overflowY: 'auto',
					}}
				>{list}</ul>
			</div>
		);
	}
}

SearchInput.propTypes = {
	placeholder: PropTypes.string,
	radius: PropTypes.bool,
	round: PropTypes.bool,
	readOnly: PropTypes.bool,
	label: PropTypes.string,
	defaultValue: PropTypes.oneOfType([
		PropTypes.string,
		PropTypes.number,
	]),
	disabled: PropTypes.bool,
	icon: PropTypes.string,
	amSize: PropTypes.oneOf(['sm','lg']),
	standalone: PropTypes.bool,
	addonBefore: PropTypes.any,
	addonAfter: PropTypes.any,
	btnBefore: PropTypes.any,
	amStyle: PropTypes.string,
	rules: PropTypes.string,
	style: PropTypes.object,
	className: PropTypes.string,
	onSelect: PropTypes.func,
	url: PropTypes.string.isRequired,
};
SearchInput.defaultProps = {
	onSelect: data => {},
};
